<template>
	<view class="content">
		<Search />
		<u-tabs
			:list="list1"
			:activeStyle="{
				fontSize: '40upx',
				color: 'rgb(41, 121, 255)',
				fontWeight: 'bold'
			}"
			:inactiveStyle="{
				fontSize: '40upx'
			}"
			lineColor="rgb(41, 121, 255)"
		></u-tabs>
		<view class="content">
			<view class="swiper">
				<u-swiper :list="list2" circular height="200"></u-swiper>
			</view>
			<view class="iconList">
				<view class="iconItem" v-for="item in 8" :key="item">
					<image
						src="../../static/image/icon/home.png"
						mode=""
					></image>
					<text>车型库</text>
				</view>
			</view>
			<NewCart :carIndex="0"></NewCart>
			<CarPrice title="本地口碑车型" :carList="carList"></CarPrice>
			<CarPrice title="二手房车推荐" :carList="usedCarList"></CarPrice>
			<NewCart :carIndex="1"></NewCart>
		</view>
	</view>
</template>

<script>
import Search from './component/search.vue'
import NewCart from './component/newCart.vue'
import CarPrice from './component/carPrice.vue'
import { getPraiseData, getUsedCarData } from '@/server/home/home.js'

export default {
	data() {
		return {
			carList: [],
			usedCarList: [],
			list2: [
				'http://car.cxycoder.com:8000/web/uploads/mall1/20211224/a590fe1d2c2d52839c13d43180a93c44.jpg',
				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				'https://cdn.uviewui.com/uview/swiper/swiper3.png'
			],
			list1: [
				{
					name: '关注'
				},
				{
					name: '推荐'
				},
				{
					name: '电影'
				},
				{
					name: '科技'
				},
				{
					name: '音乐'
				},
				{
					name: '美食'
				},
				{
					name: '文化'
				},
				{
					name: '财经'
				},
				{
					name: '手工'
				}
			]
		}
	},
	components: {
		Search,
		NewCart,
		CarPrice
	},
	onLoad() {},
	async created() {
		//获取口碑车型
		const resPraise = await getPraiseData()
		this.carList = resPraise.data
		//获取二手车
		const resUsedCar = await getUsedCarData()
		this.usedCarList = resUsedCar.data
	},
	methods: {}
}
</script>

<style scoped lang="less">
.swiper {
	box-sizing: border-box;
	padding: 30upx;
}
.iconList {
	display: flex;
	flex-wrap: wrap;
	.iconItem {
		padding: 10upx 0;
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			width: 100upx;
			height: 100upx;
		}
	}
}
</style>
